<template>
  <h1>注册</h1>
<!--   padding 是内间距-->
  <el-card style="width: 450px; margin: 0 auto; padding:20px 10px 0 0; ">
<!--   label-width 标签头宽度属性 可以   -->
    <el-form label-width="55">
<!--      item -标签 设置表单的名字  -->
      <el-form-item  label="用户名">
        <el-input v-model="user.username" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item  label="密码">
        <el-input v-model="user.password" type="password" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item  label="昵称">
        <el-input v-model="user.nickname"  placeholder="请输入昵称"/>
      </el-form-item>
      <el-form-item style="">
        <el-button type="primary" style="width: 100%;" @click="reg()" >注册</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import qs from "qs";


const user= ref({
  username:'',
  password:'',
  nickname:''
});

const reg =()=>{
  //  js响应式变量 必须得 .value
  // console.log(user.value);

  // qs.stringify将js对象转化为查询字符串的格式
  let data = qs.stringify(user.value);
  console.log(data)

  //  then --> 稍后
  // 给后端发起注册得到请求
  axios.post('http://localhost:8080/v1/users/reg',data)
      .then((response)=>{
        //回调函数 拿到服务器响应后才能执行此代码,response.data
        // console.log(response.data);

        if (response.data.code ==2002){
          ElMessage.success('注册成功!');
          // 再跳转至首页
          router.push('/')
        }else{
          ElMessage.error(response.data.msg);
        }

      })
}
</script>



<style scoped>

</style>